﻿@model MobileWebsiteGenerator.Models.MainViewModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout_Login.he-IL.cshtml";
    
    }
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Css/uploadify.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.uploadify.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        if ($("#MyTheme_Isheader").is(':checked')) {
            $("#Headersettings").css("display", "block");
            $("#Headersettings").show().slideDown("slow");

        }

        else if ($("#MyTheme_Isheader").is(':checked') == false) {
            $("#Headersettings").css("display", "none");
            $("#Headersettings").hide().slideUp("slow");
        }



        $("#MyTheme_Isheader").change(function () {
            if ($("#MyTheme_Isheader").is(':checked')) {
                $("#Headersettings").css("display", "block");
                $("#Headersettings").show().slideDown("slow");
            }
            else if ($("#MyTheme_Isheader").is(':checked') == false) {
                $("#Headersettings").css("display", "none");
                $("#Headersettings").hide().slideUp("slow");
            }
        });


        if ($("#MyTheme_IsFooter").is(':checked')) {
            $("#footerSettings").css("display", "block");
            $("#footerSettings").show().slideDown("slow");

        }

        else if ($("#MyTheme_IsFooter").is(':checked') == false) {
            $("#footerSettings").css("display", "none");
            $("#footerSettings").hide().slideUp("slow");
        }
        // $("#Website_IsPictureGallery").toggleClass("on");
        $("#MyTheme_IsFooter").change(function () {
            if ($("#MyTheme_IsFooter").is(':checked')) {


                $("#footerSettings").css("display", "block");
                $("#footerSettings").show().slideDown("slow");


            }
            else if ($("#MyTheme_IsFooter").is(':checked') == false) {


                $("#footerSettings").css("display", "none");
                $("#footerSettings").hide().slideUp("slow");

                //  alert("Contact us Pages removed succcessfully");
            }

        });
    });
</script>



<script type="text/javascript">




    $(window).load(
    function () {
        $("#ImageUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '@Url.Content("~/Uploads/")',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onError': function (e, q, f, o) {
                alert(settings.script);
            },
            'onComplete': function (event, ID, fileObj, response, data) {

                $("#MyTheme_backgroundImage").attr("value", response);
            }
        });
    });
    //Header image
    $(window).load(
    function () {
        $("#HeaderUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '@Url.Content("~/Uploads/")',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {
                $("#MyTheme_HeaderImage").attr("value", response);
            }
        });
    });

    //Banner Image
    $(window).load(
    function () {
        $("#BannerUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '@Url.Content("~/Uploads/")',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {
                $("#MyTheme_BannerImage").attr("value", response);
            }
        });
    });







    //Button image

    $(window).load(
    function () {
        $("#ButtonUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '@Url.Content("~/Uploads/")',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {
                $("#MyTheme_ButtonPicture").attr("value", response);
            }
        });
    });

</script>
<style type="text/css">
    #AllImages
    {
        border: 1px solid #000;
        border-radius: 10px;
        background-color: White;
        height: 500px;
    }
    .ImageContainer
    {
        margin: 5px;
        float: left;
        width: auto;
        display: none;
    }
    .ImageContainer img
    {
        border: 1px solid #000;
        padding: 5px;
        background-color: #999;
        border-radius: 10px;
    }
    .ImageContainer p
    {
        text-align: center;
        margin: 2px 0px;
    }
    .ImageContainer a
    {
        padding: 5px;
        background-color: Blue;
        border: 1px solid #000;
        border-radius: 10px;
        color: White;
        text-decoration: none;
    }
    .ImageContainer a:hover
    {
        text-decoration: underline;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {

        $('#headercolorCode').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#headercolorCode").css('backgroundColor', '#' + hex);
                $("#headercolorCode").html('#' + hex);
                $("#headercolorCode").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#background_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#background_color").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#background_color").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>
<link href="@Url.Content("~/Content/Css/colorpicker.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/css/colorpicker.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#MyTheme_Headercolor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_Headercolor").css('backgroundColor', '#' + hex);
                $("#HeaderColorCode").html('#' + hex);
                $("#MyTheme_Headercolor").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#MyTheme_HeadertextColor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_HeadertextColor").css('backgroundColor', '#' + hex);
                $("#HeadertextColorCode").html('#' + hex);
                $("#MyTheme_HeadertextColor").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });


    $(document).ready(function () {

        $('#MyTheme_FootertextColor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_FootertextColor").css('backgroundColor', '#' + hex);
                $("#FootertextColorCode").html('#' + hex);
                $("#MyTheme_FootertextColor").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });


    $(document).ready(function () {

        $('#MyTheme_Border').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_Border").css('backgroundColor', '#' + hex);
                $("#BorderColorCode").html('#' + hex);
                $("#MyTheme_Border").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });











    $(document).ready(function () {

        $('#MyTheme_backgroundColor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_backgroundColor").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#MyTheme_backgroundColor").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>
<div style="float: right; width: 680px; vertical-align: top; margin: 0px; padding: 0px;">
    <h3 style="font-family: Segoe UI; color: #11639d;">
        לשנות את המראה</h3>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
       
        @Html.HiddenFor(model => model.MyTheme.theme_id) 
        <div id="form1">
            <form id="form1" method="post" action="">
   

                <div class="form_row">
                <label>
                   הצג כותרת</label>
                @*<input class="form_input text-box single-line" id="MyTheme_Isheader" name="MyTheme.Isheader" type="checkbox" value="" />*@
                @Html.CheckBoxFor(model => model.MyTheme.Isheader)
            </div>
            <div id="Headersettings">
                <div class="form_row">
                    <label>
                       כותרת טקסט</label>
                    <input class="form_input text-box single-line" id="MyTheme_HeaderText" name="MyTheme.HeaderText" type="text" value="@Model.MyTheme.HeaderText" />
                </div>
                <div class="form_row">
                    <label>
                       טקסט כותרת צבע</label>
                    <input class="form_input text-box single-line" id="MyTheme_HeadertextColor" name="MyTheme.HeadertextColor" type="text" value="@Model.MyTheme.HeadertextColor" />
                    <div id="HeadertextColorCode">
                    </div>
                </div>
                <div class="form_row">
                    <label>
                      כותרת טקסט [עברית]
                    </label>
                    <input class="form_input text-box single-line" id="MyTheme_HHeaderText" name="MyTheme.HHeaderText" type="text" value="@Model.MyTheme.HHeaderText" />
                </div>
                <div class="form_row">
                    <label>
                       כותרת צבע</label>
                    <input class="form_input text-box single-line" id="MyTheme_Headercolor" name="MyTheme.Headercolor" type="text" value="@Model.MyTheme.Headercolor" />
                    <div id="HeaderColorCode">
                    </div>
                </div>
                <div class="form_row">
                    <label>
                       כותרת התמונה</label>
                    <input  class="form_input text-box single-line" id="MyTheme_HeaderImage" name="MyTheme.HeaderImage" type="text" value="@Model.MyTheme.HeaderImage" />
                   
                </div>

                 <span id="HeaderUploader"></span>
            </div>


                <div class="form_row">
                <label>
                    באנר תמונה</label>
                <input class="form_input text-box single-line" id="MyTheme_BannerImage" name="MyTheme.BannerImage" type="text" value="@Model.MyTheme.BannerImage" />
             
            </div>
               <span id="BannerUploader"></span>


              <div class="form_row">
                <label>
                    באנר טקסט</label>
                <input class="form_input text-box single-line" id="MyTheme_Bannertext" name="MyTheme.Bannertext" type="text" value="@Model.MyTheme.Bannertext" />
                
            </div>



            <div class="form_row">
                <label>
                    הגבול לחצן צבע</label>
                <input class="form_input text-box single-line" id="MyTheme_Border" name="MyTheme.Border" type="text" value="@Model.MyTheme.Border" />
                <div id="ButtonColorCode">
                </div>
            </div>



             <div class="form_row">
                <label>
                    לחצן תמונה</label>
               <input class="form_input text-box single-line" id="MyTheme_ButtonPicture" name="MyTheme.ButtonPicture" type="text" value="@Model.MyTheme.ButtonPicture" />
               
            </div>
              <span id="ButtonUploader"></span>
        

            <div class="form_row">
              <label>
                   הגודל של לחצן</label> 
                
                <div style="margin-left:157px;"> @Html.DropDownListFor(model => model.MyTheme.Size, new SelectList(new[] { "30", "40", "50", "60", "70", "80", "90","95","96","97","98","99" }), "Select ", new { @class = "test" })</div>  
                    </div>


            <div class="form_row">
                <label>
                   צבע רקע</label>
                <input class="form_input text-box single-line" id="MyTheme_backgroundColor" name="MyTheme.backgroundColor" type="text" value="@Model.MyTheme.backgroundColor" />
                <div id="bgcolorCode">
                </div>
            </div>
            <div class="form_row">
                <label>
                   תמונת רקע</label>
                <input class="form_input text-box single-line" id="MyTheme_backgroundImage" name="MyTheme.backgroundImage" type="text" value="@Model.MyTheme.backgroundImage" />
             
            </div>
         <span id="ImageUploader"></span>


                 <div class="form_row">
                <label>
                   הצג תחתונה</label>
                @Html.CheckBoxFor(model => model.MyTheme.IsFooter)
            </div>
            <div id="footerSettings">
                <div class="form_row">
                    <label>
                        כותרת תחתונה של טקסט</label>
                    <input class="form_input text-box single-line" id="MyTheme_Footertext" name="MyTheme.Footertext" type="text" value="@Model.MyTheme.Footertext" />
                </div>
                <div class="form_row">
                    <label>
                        טקסט תחתונה צבע</label>
                    <input class="form_input text-box single-line" id="MyTheme_FootertextColor" name="MyTheme.FootertextColor" type="text" value="@Model.MyTheme.FootertextColor" />
                    <div id="FootertextColorCode">
                    </div>
                </div>
                <div class="form_row">
                    <label>
                       טקסט כותרת תחתונה [עברית]
                    </label>
                    <input class="form_input text-box single-line" id="MyTheme_HFootertext" name="MyTheme.HFootertext" type="text" value="@Model.MyTheme.HFootertext" />
                </div>
                <div class="form_row">
                    <label>
                       פייסבוק הקישור
                    </label>
                    <input class="form_input text-box single-line" id="facebookurl" name="MyTheme.facebookurl" type="text" value="@Model.MyTheme.facebookurl" />
                </div>
                <div class="form_row">
                    <label>
                       קישור בטוויטר</label>
                    <input class="form_input text-box single-line" id="MyTheme_twitterurl" name="MyTheme.twitterurl" type="text" value="@Model.MyTheme.twitterurl" />
                </div>
                <div class="form_row">
                    <label>
                       Google הקישור פלוס

                    </label>
                    <input class="form_input text-box single-line" id="MyTheme_gplusurl" name="MyTheme.gplusurl" type="text" value="@Model.MyTheme.gplusurl" />
                </div>
            </div>



            <div style="float:right;" class="form_row">
                <a style="float:right;"  href="@Url.Action("Create", "Website", @MobileWebsiteGenerator.MvcApplication._MainCustomer)"   style="float:left;"  id="GoToMain" title="Go to Main page">
                     <img src="../../images/Arrow Left.png">
                </a>
               <input style=" width:80px; padding:5px;" type="submit" class="form_submits" value="שלח" id="create" />
            </div>
            </form>
        </div>
    
    
    

    }
</div>
@section MobilePreview
{
    @Html.Partial("_PreviewOnMobile.he-IL", MobileWebsiteGenerator.MvcApplication._MainCustomer);
}
<style type="text/css">
    #Submit:hover
    {
        background-color: #11639d;
        color: White;
    }
    
    div#form1 .form_row label
    {
        background-color: #11639d;
        color: White;
    }
</style>


<style type="text/css">
.test
{
    width: 353px;
height: 30px;
background-color: #EEE;
color: #4F4F4D;
border: 1px solid #CCC;
float: left;
padding: 0px 0 0 5px;
    }

</style>
